import React, { Component } from 'react'
// import './index.less'
import { Card, Form, Input, Button, Radio,Select,Switch,DatePicker, TimePicker,Upload,message, Icon, Checkbox,InputNumber ,} from 'antd'
import moment from 'moment';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const TextArea = Input.TextArea;
class Register extends Component {
    state={}
    handleSubmit = () => {
        let userInfo = this.props.form.getFieldsValue();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                message.success(`${userInfo.userName} 恭喜注册成功 密码为 ${userInfo.userPwd}`)
            }
        })
    }
    handleChange = info => {
        function getBase64(img, callback) {
            const reader = new FileReader();
            reader.addEventListener('load', () => callback(reader.result));
            reader.readAsDataURL(img);
        }

        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, imageUrl =>
                this.setState({
                    imageUrl,
                    loading: false,
                }),
            );
        }
    };
    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout ={
            //冒号左边
            labelCol:{
                xs:24,
                sm:4
            },
            //输入框
            wrapperCol:{
                xs:24,
                sm:12
            }
        }
        const offsetLayout = {
            wrapperCol:{
                xs:24,
                sm:{
                    span:12,
                    offset:4
                }
            }
        }
        return (
            <div>
                <Card title="注册表单" style={{ marginTop: 10 }}>
                    <Form  layout="horizontal">
                        <FormItem label="用户名" {...formItemLayout}>
                            {
                                getFieldDecorator('userName', {
                                    
                                    rules: [
                                        {
                                            required: true,
                                            message: '用户名不能为空'
                                        }, {
                                            min: 6, max: 10,
                                            message: '请输入6-10位'
                                        }, {
                                            pattern: new RegExp('^\\w+$', 'g'),
                                            message: '用户名需要为数字字母'
                                        }
                                    ]
                                })(<Input  placeholder="请输入用户名" />)
                            }

                        </FormItem>
                        <FormItem label="密码"  {...formItemLayout}>
                            {
                                getFieldDecorator('userPwd', {
                                   
                                    rules: [
                                        {
                                            required: true,
                                            message: '用户名不能为空'
                                        }, 
                                    ]
                                })(<Input type="password" placeholder="请输入密码" />)
                            }

                        </FormItem>
                        <FormItem label="性别"  {...formItemLayout}>
                            {
                                getFieldDecorator('sex', {
                                    initialValue:'1'

                                })(
                                    <RadioGroup>
                                        <Radio value="1">男</Radio> <Radio value="2">女</Radio>
                                    </RadioGroup>
                                )
                            }

                        </FormItem>
                        <FormItem label="年龄"  {...formItemLayout}>
                            {
                                getFieldDecorator('age', {
                                    initialValue: '18'

                                })(
                                    <InputNumber/>
                                )
                            }

                        </FormItem>
                        <FormItem label="当前状态"  {...formItemLayout}>
                            {
                                getFieldDecorator('state', {
                                    initialValue: '1'

                                })(
                                   <Select>
                                        <Option value="1">北大才子</Option>
                                        <Option value="2">清华校园</Option>
                                        <Option value="3">前端高手</Option>
                                        <Option value="4">渔夫</Option>
                                        <Option value="5">咸鱼</Option>
                                        <Option value="6">废柴</Option>
                                   </Select>
                                )
                            }

                        </FormItem>
                        <FormItem label="爱好"  {...formItemLayout}>
                            {
                                getFieldDecorator('interst', {
                                    initialValue: ['2','5']

                                })(
                                    <Select mode='multiple'>
                                        <Option value="1">吃饭</Option>
                                        <Option value="2">睡觉</Option>
                                        <Option value="3">游泳</Option>
                                        <Option value="4">爬山</Option>
                                        <Option value="5">打球</Option>
                                        <Option value="6">骑行</Option>
                                    </Select>
                                )
                            }

                        </FormItem>
                        <FormItem label="是否已婚"  {...formItemLayout}>
                            {
                                getFieldDecorator('isMarried', {
                                    valuePropName:'checked',
                                    initialValue: true,

                                })(
                                    <Switch>
                                      
                                    </Switch>
                                )
                            }

                        </FormItem>
                        <FormItem label="生日"  {...formItemLayout}>
                            {
                                getFieldDecorator('birthday', {
                                   
                                    initialValue: moment('2019-09-09 23:45:21')

                                })(
                                    <DatePicker showTime format="YYYY-MM-DD HH:mm:ss"></DatePicker>
                                )
                            }

                        </FormItem>
                        <FormItem label="联系地址"  {...formItemLayout}>
                            {
                                getFieldDecorator('address', {

                                    initialValue: "北京市奥利匹克公园"

                                })(
                                    <TextArea autoSize={
                                        {
                                            minRows:4,maxRows:6
                                        }
                                    } ></TextArea>
                                )
                            }

                        </FormItem>
                        <FormItem label="早起时间"  {...formItemLayout}>
                            {
                                getFieldDecorator('time')(
                                    <TimePicker/>
                                )
                            }

                        </FormItem>
                        <FormItem label="头像"  {...formItemLayout}>
                            {
                                getFieldDecorator('userImg', {

                                    valuePropName: 'file'
                                })(
                                    <Upload listType="picture-card"
                                        showUploadList={false}
                                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                        onChange={this.handleChange}
                                    >
                                        {this.state.imageUrl ? <img style={{width:120}} src={this.state.imageUrl} alt=""/>:<Icon type="plus"></Icon>}
                                    </Upload>
                                )
                            }

                        </FormItem>
                        <FormItem  {...offsetLayout}>
                            {
                                getFieldDecorator('isRead', {

                                    valuePropName: 'checked'
                                })(
                                    <Checkbox>我已阅读<a href="/">版权声明</a></Checkbox>
                                )
                            }

                        </FormItem>
                        <FormItem  {...offsetLayout}>
                            {
                                getFieldDecorator('userRules')(
                                    <Button type='primary' onClick={this.handleSubmit}>注册</Button>
                                )
                            }

                        </FormItem>
                    </Form>
                </Card>


            </div>
        )
    }
}
export default Form.create()(Register)